<template>
  <div style="width: 100%; height: 100%; padding: 0 10px">
    <div class="jjb_text">{{ "监区" }}&nbsp;值班日志</div>
    <div class="drawer_box" v-if="isShows">
      <div class="date_searchbox">
        <div>
          <el-date-picker
            style="width: 218px"
            v-model="value3"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择年份"
            @change="changs"
          />
        </div>
        <div class="btn_box" style="width: 100%">
          <div
            @click="btnClick(item, index)"
            :class="{ isAtv: isIndex == index }"
            class="itemz flex_center_center"
            v-for="(item, index) in jqArrCv"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div
        style="
          height: 100%;
          width: 1360px;
          overflow-y: scroll;
        "
      >
        <el-form
          ref="ruleFormRef"
          :model="formDataJJB"
          label-position="right"
          label-width="140px"
        >
          <div class="date_box" style="margin-bottom: 10px">
            <div>
              值班日期：{{ isStartDate }} &nbsp;至&nbsp;
              {{ isEndDate }}
            </div>
            <div>填报人：{{ tbObj.reportUser }}</div>
          </div>
          <div class="jjb border_table" style="border-bottom: none">
            <el-table border :data="tableDataZb" style="width: 100%">
              <el-table-column prop="date" label="" width="160">
                <template #default="scope">
                  <div v-if="scope.row.date == '白班'">
                    <div>
                      <span :style="{ color: getColor(scope.row) }">{{
                        "白班"
                      }}</span>
                      &nbsp; <span>09:10-16:30</span>
                    </div>
                  </div>
                  <div v-if="scope.row.date == '夜班'">
                    <div>
                      <span :style="{ color: getColor(scope.row) }">{{
                        "夜班"
                      }}</span>
                      &nbsp; <span>16:30-09:10 次</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="" width="80" align="center" />
              <el-table-column prop="a" label="" width="80" align="center" />
              <el-table-column
                prop="names"
                label=""
                width="80"
                align="center"
              />
              <el-table-column prop="b" label="" align="center" />
              <el-table-column prop="c" label="" width="90" align="center" />
              <el-table-column prop="d" label="" width="80" align="center" />
            </el-table>
          </div>
          <div class="jj_box" style="display: flex; width: 100%; justify-content: space-between"></div>

          <div class="jjb border_table"  style="border-bottom: none; border-top: none"
          >
            <!-- 工作情况 -->
            <el-table
            :span-method="objectSpanMethod"
            border
            :data="gzqkList"
            style="width: 100%"
            @cell-click="gzqkCellClick"
          >
            <el-table-column prop="title" label="" width="100" align="center">
              <template #default="scope">
                <div>
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              width="140"
              align="center"
            />
            <!-- 讲评民警 -->
            <el-table-column prop="czwt" label="" align="center" width="90">
              <template #default="scope">
                <div v-if="scope.$index != 0">
                  {{ scope.row.czwt }}
                </div>
                <div
                  v-if="scope.$index == 0"
                  style="width: 100%; text-align: left"
                >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(zytzArr, '罪犯')"
                    :key="index"
                  >
                    <div
                      style="
                        margin-right: 10px;

                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{
                        item.createDate.replace(/T/g, " ").split(" ")[0] +
                        " " +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[0] +
                        ":" +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[1]
                      }}
                    </div>
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
                <!-- 安全隐患排查 -->
                <div
                  v-if="scope.$index == 3"
                  style="width: 100%; text-align: left"
                >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(aqyhArr, '罪犯')"
                    :key="index"
                  >
                    <div style="margin-right: 10px" class="yc_date">
                      {{
                        item.createDate.replace(/T/g, " ").split(" ")[0] +
                        " " +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[0] +
                        ":" +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[1]
                      }}
                    </div>
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      情况： {{ item.content }}
                    </div>
                  </div>
                </div>
                <!-- 设备设施情况 -->
                <div
                  v-if="scope.$index == 4"
                  style="width: 100%; text-align: left"
                >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(sbssArr, '罪犯')"
                    :key="index"
                  >
                    <div style="margin-right: 10px" class="yc_date">
                      {{
                        item.createDate.replace(/T/g, " ").split(" ")[0] +
                        " " +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[0] +
                        ":" +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[1]
                      }}
                    </div>
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      情况： {{ item.content }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- 回看民警 -->
            <el-table-column prop="czwtValue" label="" width="80">
              <template #default="scope">
                <div
                  v-if="scope.$index == 1"
                  style="width: 100%; text-align: left"
                >
               
                <div
                    style="display: flex"
                    v-for="(item, index) in getContet(dcczwtArr, '罪犯')"
                    :key="index"
                  >
                    <!-- <div
                      style="
                        margin-right: 10px;

                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{
                        item.createDate.replace(/T/g, " ").split(" ")[0] +
                        " " +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[0] +
                        ":" +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[1]
                      }}
                    </div> -->
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
                <div
                  v-if="scope.$index == 2"
                  style="width: 100%; text-align: left"
                >
                  <!-- <div
                    style="display: flex"
                    v-for="(item, index) in getContet(scope.row.ids, '工作')"
                    :key="index"
                  >
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.jpmj }}
                    </div>
                  </div> -->
               
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(jpmjArr, '罪犯')"
                    :key="index"
                  >
                 
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
                <div
                  v-if="scope.$index == 3"
                  style="width: 100%; text-align: left"
                >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(scope.row.ids, '工作')"
                    :key="index"
                  >
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.aqczwt }}
                    </div>
                  </div>
                </div>
                <div
                  v-if="scope.$index == 4"
                  style="width: 100%; text-align: left"
                >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(scope.row.ids, '工作')"
                    :key="index"
                  >
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.sbczwt }}
                    </div>
                  </div>
                </div>
                <div
                  v-if="scope.$index == 5"
                  style="width: 100%; text-align: left"
                >
                <div
                    style="display: flex"
                    v-for="(item, index) in getContet(hkmjArr, '罪犯')"
                    :key="index"
                  >
                 
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- 回看时段 -->
            <el-table-column prop="hksd" label="" align="center" width="89">
              <template #default="scope">
                <div v-if="scope.$index == 5">
                  <div>
                    {{ scope.row.hksd }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- 回看内容 -->
            <el-table-column prop="" label="" width="120">
              <template #default="scope">
                <div v-if="scope.$index == 5">
                  <div style="width: 100%; text-align: left">
                    <div
                    style="display: flex"
                    v-for="(item, index) in getContet(hksdArr, '罪犯')"
                    :key="index"
                  >
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>


                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="dcgzts" label="" width="120" align="center">
              <template #default="scope">
                {{ scope.row.dcgzts }} 
              </template>
            </el-table-column>
            <el-table-column prop="" label="">
              <template #default="scope">
                <div v-if="scope.$index != 0">
                  <div
                    v-if="scope.$index == 1"
                    style="width: 100%; text-align: left"
                  >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(dcgztsArr, '罪犯')"
                    :key="index"
                  >
                   
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>


                  </div>
                  <div
                    v-if="scope.$index == 2"
                    style="width: 100%; text-align: left"
                  >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(jpnrArr, '罪犯')"
                    :key="index"
                  >
                   
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                  </div>
                  <div
                    v-if="scope.$index == 3"
                    style="width: 100%; text-align: left"
                  >
                    <div
                      style="display: flex"
                      v-for="(item, index) in getContet(scope.row.ids, '工作')"
                      :key="index"
                    >
                      <div
                        style="
                          margin-right: 10px;
                          min-width: 120px;
                          text-align: left;
                        "
                        class="yc_content"
                      >
                        {{ item.aqsbqk }}
                      </div>
                    </div>
                  </div>
                  <div
                    v-if="scope.$index == 4"
                    style="width: 100%; text-align: left"
                  >
                    <div
                      style="display: flex"
                      v-for="(item, index) in getContet(scope.row.ids, '工作')"
                      :key="index"
                    >
                      <div
                        style="
                          margin-right: 10px;
                          min-width: 120px;
                          text-align: left;
                        "
                        class="yc_content"
                      >
                        {{ item.sbsbqk }}
                      </div>
                    </div>
                  </div>
                  <div
                    v-if="scope.$index == 5"
                    style="width: 100%; text-align: left"
                  >
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(jkdwArr, '罪犯')"
                    :key="index"
                  >
                   
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="czwts" label="" align="center" width="90">
              <template #default="scope">
                {{ scope.row.czwts }}
              </template>
            </el-table-column>
            <el-table-column prop="czwts" label="">
              <template #default="scope">
                <div v-if="scope.$index == 5">
                  <div style="width: 100%; text-align: left">
                    <div
                    style="display: flex"
                    v-for="(item, index) in getContet(sphfczwtArr, '罪犯')"
                    :key="index"
                  >
                   
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          </div>

          <div
            class="jjb border_table"
            style="border-bottom: none; border-top: none"
          >
            <!-- 罪犯情况 -->
            <el-table
              border
              :span-method="objectSpanMethodCv"
              :data="ycqkList"
              style="width: 100%"
            >
              <el-table-column
                prop="title"
                label=""
                width="100"
                align="center"
              />
              <el-table-column
                prop="type"
                label="类型"
                width="140"
                align="center"
              >
                <template #default="scope">
                  {{ scope.row.type + "情况" }}
                </template>
              </el-table-column>
              <el-table-column prop="content" label="情况描述">
                <template #default="scope">
                  <div
                    style="display: flex"
                    v-for="(item, index) in getContet(scope.row.ids, '罪犯')"
                    :key="index"
                  >
                    <div style="margin-right: 10px" class="yc_date">
                      {{
                        item.createDate.replace(/T/g, " ").split(" ")[0] +
                        " " +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[0] +
                        ":" +
                        item.createDate
                          .replace(/T/g, " ")
                          .split(" ")[1]
                          .split(":")[1]
                      }}
                    </div>
                    <div
                      style="
                        margin-right: 10px;
                        min-width: 120px;
                        text-align: left;
                      "
                      class="yc_content"
                    >
                      情况： {{ item.content }}
                    </div>
                    <!-- <div style="margin-right: 10px" class="yc_handleUserName">
                      {{ item.handleUserName }}
                    </div>     -->

                    <div style="margin-right: 10px" class="yc_handleContent">
                      处理： {{ item.handleContent }}
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="jjb border_table"
            style="border-bottom: none; border-top: none"
          >
            <!-- 工作交接 -->
            <el-table
              border
              :span-method="objectSpanMethod2"
              :data="gzjjList"
              style="width: 100%"
            >
              <el-table-column
                prop="title"
                label=""
                width="100"
                align="center"
              />
              <el-table-column label="类型" width="140" align="center">
                <template #default="scope">
                  <div>
                    {{ scope.row.type }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="情况描述">
                <template #default="scope">
                  <div v-if="scope.$index == 1 || scope.$index == 2">
                    {{ scope.row.content }}
                  </div>
                  <div v-if="scope.$index == 0">
                    <div style="width: 100%; display: flex">
                      <div style="margin-right: 10px">
                        监内罪犯 {{ scope.row.jnrs }}人
                      </div>

                      <div style="margin-right: 6px">
                        监外 {{ scope.row.jwrs }}人
                      </div>
                      <div style="margin-right: 6px">
                        车间 {{ scope.row.cjrs }}人
                      </div>
                      <div style="margin-right: 6px">
                        住院 {{ scope.row.zyrs }}人
                      </div>
                      <div style="margin-right: 6px">
                        其余 {{ scope.row.qyrs }}人
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
//需要删除的代码
import { ElMessage } from "element-plus";
//需要删除的代码
import jjbSaveZj from "./jjbSave.vue";
//需要删除的代码
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
//需要删除的代码
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits, computed } from "vue";

let formDataJJB = ref({});
// 声明年月日 时
let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");

let byYcData = ref([]);
let gzqkData = ref([]);
let DutySList = ref([]);
let dateArr = ref([]);
let ycqkids = ref([]);
let formattedDateStr = ref("");
let formattedNextDateStr = ref("");
let isStartDate = ref("");
let isEndDate = ref("");
let aqyhArr = ref("");
let sbssArr = ref("");
let zytzArr = ref('')
let dcczwtArr = ref('')
let dcgztsArr = ref('')
let jpmjArr = ref('');
let jpnrArr = ref('');
let hkmjArr = ref('');
let hksdArr = ref('');
let jkdwArr = ref('');
let sphfczwtArr = ref('');
let listData = ref([]);
let jcNub = ref(0);
let peopleArr = ref([]);
let isShows = ref(true);
let ggjjObj = ref({ reporttUser: "" });
let tbObj = ref({});
let jqArrCv = ref([]);
let isIndex = ref(0);
let ycqkList = ref([
  {
    title: "罪犯改造信息收集初中情况",
    type: "罪犯改造活动",
    content: "",
  },
  {
    title: "罪犯改造信息收集初中情况",
    type: "罪犯异常",
    content: "",
  },
  {
    title: "罪犯改造信息收集初中情况",
    type: "罪犯违规违纪",
    content: "",
  },
  {
    title: "罪犯改造信息收集初中情况",
    type: "罪犯提讯、提审",
    content: "",
  },
  {
    title: "罪犯改造信息收集初中情况",
    type: "罪犯疾病处置",
    content: "",
  },
]);

let gzqkList = ref([
{
    title: "民警值班工作安排落实情况",
    type: "重要通知安排",
    content: "",
  },
  {
    title: "民警值班工作安排落实情况",
    type: "督察情况，反馈情况",
    czwt: "存在问题",
    czwtValue: "",
    dcgzts: "督察工作提示",
    dcgztsValue: "",
    content: "",
  },
  {
    title: "民警值班工作安排落实情况",
    type: "日常讲评情况",
    czwt: "讲评民警",
    czwtValue: "",
    dcgzts: "讲评内容",
    dcgztsValue: "",
    content: "",
  },
  {
    title: "民警值班工作安排落实情况",
    type: "安全隐患排查",
    czwt: "",
    czwtValue: "",
    dcgzts: "",
    dcgztsValue: "",
    content: "",
  },
  {
    title: "民警值班工作安排落实情况",
    type: "设施设备情况",
    czwt: "",
    czwtValue: "",
    dcgzts: "",
    dcgztsValue: "",
    content: "",
  },
  {
    title: "民警值班工作安排落实情况",
    type: "夜间视频回放情况",
    czwt: "回看民警",
    czwtValue: "",
    dcgzts: "监控点位",
    dcgztsValue: "",
    hksd: "回看时段",
    czwts: "存在问题",
    content: "",
  },
]);

let gzjjList = ref([
  {
    title: "工作交接情况",
    type: "罪犯人数",
    content: "",
  },
  {
    title: "工作交接情况",
    type: "当日需跟进处理事项",
    content: "",
  },
  {
    title: "工作交接情况",
    type: "阶段性要求",
    content: "",
  },
  {
    title: "备注",
    type: "",
    content: "",
  },
]);

const value3 = ref("");
const selectValue = ref("");
const props = defineProps({
  orgIds: {
    type: Number,
    default: 22,
  },
  pids: {
    type: Number,
    default: 173,
  },
  orgName: {
    type: String,
    default: "",
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
const tableDataZb = ref([
  {
    date: "白班",
    name: "领导",
    a: "",
    names: "民警",

    d: "",
    b: "",
    c: "罪犯人数",
  },
  {
    date: "夜班",
    name: "领导",
    a: "",
    names: "民警",
    d: "",
    b: "",
    c: "罪犯人数",
  },
]);


watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      getFormattedDateTime();
      value3.value = daydata.value;
      if (props.jqArr) {
        jqArrCv.value = JSON.parse(sessionStorage.getItem("jqArr"));
        let arr = [];
        //注释报错代码 jqArrCv.value为null
        return
        
        arr = jqArrCv.value.filter((item) => item.name.includes("监区") );
        

        jqArrCv.value = arr;

        let allJq = jqArrCv.value.map((itz) => itz.id);

        selectValue.value = allJq[0];

        getTimeRangeFun(daydata.value);
      }
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);

onBeforeMount(() => {});

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex == 0) {
      return {
        rowspan: 6,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
  if (columnIndex == 2) {
    if (rowIndex == 0 || rowIndex == 3 || rowIndex == 4) {
      return {
        rowspan: 1,
        colspan: 8,
      };
    } else {
      return {
        rowspan: 1,
        colspan: 1,
      };
    }
  }

  if (columnIndex == 3 || columnIndex == 7) {
    if (rowIndex == 1 || rowIndex == 2) {
      return {
        rowspan: 1,
        colspan: 3,
      };
    }
  }
  if (columnIndex == 4 || columnIndex == 7) {
    if (rowIndex == 1 || rowIndex == 2) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
  if (columnIndex == 5 || columnIndex == 7) {
    if (rowIndex == 1 || rowIndex == 2) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }

};

const objectSpanMethod2 = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 && rowIndex != 3) {
    if (rowIndex == 0) {
      return {
        rowspan: 3,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }

  if (columnIndex === 1) {
    if (rowIndex == 3) {
      return {
        rowspan: 1,
        colspan: 2,
      };
    } else {
      return {
        rowspan: 1,
        colspan: 1,
      };
    }
  }
};
const objectSpanMethodCv = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex == 0) {
      return {
        rowspan: 5,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
const emit = defineEmits(["childEvent"]);

const getContet = (row, is) => {
  if (row && is == "罪犯") {
    let arrs = row.split(",").filter((item) => item != "undefined");

    const result = byYcData.value.filter((item) =>
      arrs.includes(String(item.id))
    );

    return result;
  }
  if (row && is == "工作") {
    let arrs = row.split(",").filter((item) => item != "undefined");

    const result = gzqkData.value.filter((item) =>
      arrs.includes(String(item.id))
    );

    return result;
  }
};
//需要删除的代码
const getColor = (row) => {
  // if(row.a || row.b){
  //   return '#2ab051'
  // }else{
  //   return 'red'
  // }
};
// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;
  return `${year}-${month}-${day} ${hour.value}`;
};

const getMonthDates = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth(); // 注意：月份从0开始，所以11表示12月
  // 获取当前月的天数
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  // 生成日期数组
  const dates = [];
  for (let day = 1; day <= daysInMonth; day++) {
    const dateString = `${year}-${String(month + 1).padStart(2, "0")}-${String(
      day
    ).padStart(2, "0")}`;
    dates.push({
      date: dateString,
      is: false,
    });
  }
  dateArr.value = dates;
  dateArr.value.forEach((item) => {
    if (item.date == daydata.value) {
      item.is = true;
    }
  });
};

const getTimeRangeFun = async (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");
  // 格式化日期为 YYYY-MM-DD
  const formattedDate = `${year}-${month}-${day}`;
  // 创建第二天的日期对象
  const nextDay = new Date(date);
  nextDay.setDate(nextDay.getDate() + 1);
  const nextYear = nextDay.getFullYear();
  const nextMonth = String(nextDay.getMonth() + 1).padStart(2, "0");
  const nextDayStr = String(nextDay.getDate()).padStart(2, "0");
  // 格式化第二天的日期为 YYYY-MM-DD
  const formattedNextDate = `${nextYear}-${nextMonth}-${nextDayStr}`;
  // 返回时间段字符串
  formattedDateStr.value = formattedDate;
  formattedNextDateStr.value = formattedNextDate;
  getShiftLogSelect();
};

const getShiftLogSelect = async () => {
  let res = await http.znjw.ShiftLogSelect({
    page: 1,
    limit: 999,
    shiftId: props.pids,
    startDate: formattedDateStr.value + " " + "00:00:00",
    endDate: formattedNextDateStr.value + " " + "00:00:00",
  });
  if (res && res.code == 0) {
    if (res.data.data.length) {
      let startDates = res.data.data[res.data.data.length - 1].startDate;
      let endDates = res.data.data[res.data.data.length - 1].endDate;
      isStartDate.value =
        startDates.split("T")[0] + " " + startDates.split("T")[1];
      isEndDate.value = endDates.split("T")[0] + " " + endDates.split("T")[1];
    } else {
      let resz = await http.znjw.ShiftSelect({
        type: "jq",
        pId: 0,
        orgId: selectValue.value,
        startDate: "",
        endDate: "",
        isLock: 0,
        zbType: "1",
      });
      if (resz && resz.code == 0) {
        let dateObj = resz.data[0] || {
          start:'09:30:00',
          end:'09:30:00'
        };
        isStartDate.value = formattedDateStr.value + " " + dateObj.start;
        isEndDate.value = formattedNextDateStr.value + " " + dateObj.end;
      }
    }
    //交接班列表数据
    getShiftDutySelect();
    getZdbSelect();
    //罪犯情况
    getExceptionReportSelect();
    //工作情况
    // getExceptionReportWorkSelect();
  }
};

const changs = (row) => {
  if (row) {
    getTimeRangeFun(row);
  } else {
    getTimeRangeFun(daydata.value);
  }
};

const itemClick = (index, item) => {
  dateArr.value.forEach((item) => {
    item.is = false;
  });
  getTimeRangeFun(item.date);
  dateArr.value[index].is = true;
};
//工作情况数据
const getExceptionReportWorkSelect = async () => {
  let obj = {
    page: 1,
    limit: 99,
    orgId: selectValue.value,
    exceptType: "",
    startDate: isStartDate.value,
    endDate: isEndDate.value,
    state: "0",
    reportType: "",
  };
  let res = await http.znjw.WorkReportSelect(obj);
  if (!res) return;
  // if (res.code == 0) {  }
  let gzArr = res.data.data;
  if (Array.isArray(gzArr)) {
    if (gzArr.length) {
      gzqkIds.value = gzArr.map((item) => item.id);
      gzqkData.value = gzArr;
      gzArr.forEach((item) => {
        gzqkList.value.forEach((itz) => {
          if (item.type == itz.type) {
            itz["ids"] += "," + item.id;
          }
        });
      });
    } else {
      gzqkData.value = [];
    }
  }
};
//异常情况数据
const getExceptionReportSelect = async () => {
  let obj = {
    page: 1,
    limit: 99,
    orgId: selectValue.value,
    exceptType: "",
    startDate: isStartDate.value,
    endDate: isEndDate.value,
    state: "0",
    reportState: "0,1",
    reportType: "zf",
  };
  let res = await http.znjw.ExceptionReportSelect(obj);
  if (!res) return;
  let ycArr = res.data.data;

  if (Array.isArray(ycArr)) {
    if (ycArr.length) {
      ycqkids.value = ycArr.map((item) => item.id);
      byYcData.value = ycArr;
      ycArr.forEach((item) => {
        if (item.content) {
          ycqkList.value.forEach((itz) => {
            if (item.exceptType == "视频回放存在问题") {
          sphfczwtArr.value += "," + item.id;
        }
        if (item.exceptType == "回看时段") {
          hksdArr.value += "," + item.id;
        }
        if (item.exceptType == "监控点位") {
          jkdwArr.value += "," + item.id;
        }
        if (item.exceptType == "回看民警") {
          hkmjArr.value += "," + item.id;
        }
        if (item.exceptType == "安全隐患排查") {
          aqyhArr.value += "," + item.id;
        }
        if (item.exceptType == "讲评民警") {
          jpmjArr.value += "," + item.id;
        }
        if (item.exceptType == "讲评内容") {
          jpnrArr.value += "," + item.id;
        }
        if (item.exceptType == "重要通知安排") {
          zytzArr.value += "," + item.id;
        }
        if (item.exceptType == "督察情况，反馈情况存在问题") {
          dcczwtArr.value += "," + item.id;
        }
        if (item.exceptType == "督察工作提示") {
          dcgztsArr.value += "," + item.id;
        }
        if (item.exceptType == "设施设备情况") {
          sbssArr.value += "," + item.id;
        }
            if (itz.type == item.type) {
              itz["ids"] += "," + item.id;
            }
          });
        }
      });
    } else {
      byYcData.value = [];
    }
  }
};
//获取警察值班人员
const getZdbSelect = async (zbArr) => {
  let res = await http.znjw.ZdbSelect({
    type: "jq",
    zbType: "1",
    orgId: selectValue.value || "",
    shift: "",
    account: "",
    date: value3.value,
  });
  if (!res) return;
  if (res.code == 0) {
    let zbArr = res.data;
    zbArr.length &&
      zbArr.forEach((item) => {
        item["zbryInfoArr"] =
          item?.zbry &&
          item.zbry.split(",").map((itz, index) => {
            return {
              name: item.zbry.split(",")[index],
              id: "",
              is: false,
              zbryAccount: item.zbryAccount.split(",")[index],
            };
          });
      });
    listData.value = zbArr;
    jcNub.value = 0;

    tableDataZb.value[0].a = "";
    tableDataZb.value[0].b = "";
    tableDataZb.value[1].a = "";
    tableDataZb.value[1].b = "";
    listData.value.forEach((item) => {
      if (item.zbry) {
        item.zbry.split(",").forEach((itz) => {
          peopleArr.value.push(itz);
          jcNub.value += 1;
        });
      }
    });

    listData.value.forEach((item) => {
      if (item.pshiftName == "白班") {
        if (item.shiftName == "领导") {
          tableDataZb.value[0].a = item.zbry;
        }
        if (item.shiftName == "民警") {
          tableDataZb.value[0].b = item.zbry;
        }
      }
      if (item.pshiftName == "夜班") {
        if (item.shiftName == "领导") {
          tableDataZb.value[1].a = item.zbry;
        }
        if (item.shiftName == "民警") {
          tableDataZb.value[1].b = item.zbry;
        }
      }
    });
  }
};

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const getShiftDutySelect = async () => {
  let obj = {
    page: 1,
    limit: 200,
    orgId: selectValue.value,
    startDate: isStartDate.value,
    endDate: isEndDate.value,
    dutyType: "jq",
  };
  let res = await http.znjw.ShiftDutySelect(obj);
  if (res && res.code == 0) {
    DutySList.value = res.data.data;
    if (DutySList.value.length < 1) {
      // getZdbSelect([]);
      // getExceptionReportWorkSelect([]);
      // getExceptionReportSelect([]);
      gzjjList.value[0].jnrs = "";
      gzjjList.value[0].jwrs = "";
      gzjjList.value[0].cjrs = "";
      gzjjList.value[0].zyrs = "";
      gzjjList.value[0].qyrs = "";
      gzjjList.value[1].content = "";
      gzjjList.value[2].content = "";
      gzjjList.value[3].type = "";
      tbObj.value.reporttUser = "";
      tableDataZb.value[1].d = "";
      tableDataZb.value[0].d = "";
    }

    DutySList.value.length &&
      DutySList.value.forEach((item) => {
        gzjjList.value[1].content = item.clsx;
        gzjjList.value[2].content = item.gzyq;
        gzjjList.value[3].type = item.remark;
        gzjjList.value[0].jnrs = item.jnrs;
        gzjjList.value[0].jwrs = item.jwrs;
        gzjjList.value[0].cjrs = item.cjrs;
        gzjjList.value[0].zyrs = item.zyrs;
        gzjjList.value[0].qyrs = item.qyrs;
        sessionStorage.setItem("formDataJJB", JSON.stringify(item));
        ggjjObj.value = item;
        tbObj.value.reportUser = item.reportUser;

        tableDataZb.value[0].d = item.ybzf;
        tableDataZb.value[1].d = item.bbzf;

        // // 值班数据
        // let zbArr = item.zdbItem;
        // getZdbSelect(zbArr);
        // //工作情况
        // let gzArr = item.workItem;
        // getExceptionReportWorkSelect(gzArr);
        // //异常情况
        // let ycArr = item.exceItem;
        // getExceptionReportSelect(ycArr);
      });
  }
};

const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getTimeRangeFun(value3.value || daydata.value);
};


</script>

<style scoped lang="scss">
::v-deep .date_searchbox {
  .el-input__wrapper {
    background-color: rgba(15, 82, 163, 0.278);
    box-shadow: (0 0 0 1px rgba(15, 82, 163, 0.61)) inset;
  }
  .el-input__inner {
    color: white;
  }
  .el-input__prefix {
    color: white;
  }
}
.isDate {
  color: #ffffff;
  font-weight: bold;
  border-color: rgb(18, 123, 215) !important;
}
.date_searchbox {
  width: 220px;
  height: 100%;
  margin-right: 6px;
}
.month_box {
  width: 100%;
  height: 96%;
  overflow-y: scroll;
  margin-top: 4px;
  .items {
    font-size: 14px;
    width: 100%;
    margin-bottom: 4px;
    cursor: pointer;
    height: 24px;
    color: #fff;
    border-bottom: 1px solid rgba(15, 82, 163, 0.61);
  }
}
.border_table {
  border: 1px solid rgba(15, 82, 163, 0.61);
  border-right: none;
}
.jjb_text {
  position: absolute;
  left: 60%;
  transform: translate(-50%, -50%);
  top: 144px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}
.date_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  padding-right: 64px;
  font-size: 14px;
  color: #e5dfdf;
}
.wrap_text {
  width: 60px;
  overflow-wrap: break-word; /* 新版浏览器支持 */
}
.yc_table {
  width: 100%;
  overflow-y: scroll;
  color: white;
  height: 200px;
  .table_item {
    width: 100%;
    height: 30px;
    cursor: pointer;
    height: 25px;
    justify-content: space-evenly;
    font-size: 12px;
  }
}
.jj_box {
  margin-bottom: 0px;
  font-size: 14px;
}
.drawer_box {
  width: 100%;
  height: 780px;
  display: flex;
  position: relative;
  .dialog-footer {
    position: absolute;
    bottom: -50px;
    right: 2px;
  }
}
</style>
